<!DOCTYPE html>
<html>
<head>
  <title>Developers Map</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
  integrity="sha384-sHL9NAb7lN7rfvG5lfHpm643Xkcjzp4jFvuavGOndn6pjVqS6ny56CAt3nsEVT4H"
  crossorigin="" />
  <style type="text/css">
  body {  padding: 0; margin: 0;  }
  html, body, #developers-map {  height: 100%;  }
  </style>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
  integrity="sha384-cxOPjt7s7Iz04uaHJceBmS+qpjv2JkIHNVcuOrM+YHwZOmJGBXI00mdUXEq65HTH"
  crossorigin="">
  </script>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <link rel="points" type="application/json" href="../resources/data/contributors.json">
</head>
<body>
  <div id="developers-map"></div>
  <script>
  var developersMapTiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZooom: 18,
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  });

  $.getJSON($('link[rel="points"]').attr("href"), function(data) {
    var nameString = '';
    var geojson = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
        if (feature.properties['GIT Nickname'] !== undefined){
          nameString = "<a href='https://github.com/" +
                       feature.properties['GIT Nickname'] + "' target='_blank' >" +
                       feature.properties.Name + "</a>";
        } else {
          nameString = feature.properties.Name;
        }
        layer.bindPopup(nameString + "<br>" +
                        (feature.properties.Committer == "Yes" ?
                        "Core committer" : "Core contributor" ));
      }
    });
    var map = L.map('developers-map', { attributionControl: false }).fitBounds(geojson.getBounds());
    L.control.attribution( { prefix: false } ).addTo( map );
    developersMapTiles.addTo(map);
    geojson.addTo(map);
     setTimeout(function() {
       map.setZoom(1);
     }, 0);
  });
  </script>
</body>
</html>
